﻿
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
}
@model RTW.OA.Models.diary
@section styles{
    <style type="text/css">
        .post_body {
            clear: both;
            word-wrap: break-word;
            overflow: hidden;
            color: #4f4f4f;
            line-height: 24px;
            position: relative;
            padding: 5px 15px;
            font-size: 12px;
        }

        blockquote {
            padding-left: 5px;
            font-size: 13px;
            background-color: #eee;
        }
    </style>
}
<div class="wrapper wrapper-content  animated fadeInRight article">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="ibox">
                <div class="ibox-content">
                    @*<div class="pull-right">
                            <button class="btn btn-white btn-xs" type="button">700BIKE</button>
                            <button class="btn btn-white btn-xs" type="button">BeginOne</button>
                            <button class="btn btn-white btn-xs" type="button">乐视超级自行车</button>
                        </div>*@
                    <div class="text-center article-title">
                        <h2>
                            @Model.SUBJECT
                        </h2>
                    </div>
                    <p>
                        @Html.Raw(Model.CONTENT)
                    </p>
                    @if (!string.IsNullOrEmpty(Model.ATTACHMENT_ID))
                    {
                        <a href="@Model.ATTACHMENT_ID" target="_blank">查看附件</a>
                    }
                    <hr>
                    <div class="row">
                        <div class="col-lg-12" style="text-align:right;">
                            <textarea class="col-lg-12" id="diary_comment" rows="6" style="width:100%;display:block;"></textarea>
                            <button class="btn btn-primary text-right" style="margin-top:5px;" onclick='return addComment(@Model.DIA_ID,"@Model.USER.USER_NO");'>发表评论</button>
                        </div>
                    </div>

                    <a name="comment"></a>
                    <div class="row">
                        <div id="comments" class="col-lg-12">
                            <h2>评论：</h2>
                            @foreach (var item in Model.diary_comments)
                            {
                                <div class="social-feed-box" style="position:relative;">
                                    <div class="social-avatar">
                                        <a href="" class="pull-left">
                                            <img alt="image" src="@Url.Content("~/Content/img/avatar/a1.jpg")">
                                        </a>
                                        <div class="media-body">
                                            <a href="#">
                                                @item.user.TRUE_NAME
                                            </a>
                                            <small class="text-muted">@item.SEND_TIME</small>
                                        </div>
                                    </div>
                                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#comment-reply-modal" onclick="showReplyModal(@item.COMMENT_ID,'@item.user.USER_NO','@item.user.TRUE_NAME');" style="position:absolute;top:5px;right:5px;">回复</a>
                                    <div class="social-body">
                                        <p>
                                            @item.CONTENT
                                        </p>
                                    </div>
                                    <div>
                                        @foreach (var reply in item.diary_comment_reply)
                                        {
                                            <div class="post_body">
                                                <fieldset style="background-color:#bbb;border-bottom:1px solid #ccc;padding-left:3px;">
                                                    <blockquote>@reply.REPLY_TIME @(reply.REPLYER)@@@item.user.TRUE_NAME：@reply.REPLY_COMMENT</blockquote>
                                                </fieldset>
                                            </div>
                                        }
                                        <div style="height:15px;"></div>
                                    </div>
                                </div>
                            }
                            <div v-for="item in comments">
                                <comment-item v-bind:comment="item"></comment-item>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="diary_comment_template">
        <div class="social-feed-box"><div class="social-avatar"><a href="#" class="pull-left"><img alt="头像" :src="comment.avatar" /></a><div class="media-body"><a href="#">{{comment.nickname}}</a><small class="text-muted">{{comment.sendtime}}</small></div></div><div class="social-body"><p v-html="comment.content"></p></div></div>
    </template>
    <div class="modal fade" id="comment-reply-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h3 class="modal-title" id="myModalLabel">
                        回复评论
                    </h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="comment_id" />
                    <input type="hidden" id="reply_to" />
                    <input type="hidden" id="reply_nickname" />
                    <textarea id="diary_comment_reply" rows="6" style="width:100%;"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="addCommentReply();">
                        回复
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="@Url.Content("~/Content/js/vue.min.js")"></script>
    <script src="@Url.Content("~/Content/js/common/Date.js")"></script>

    <script src="@Url.Content("~/Content/js/common/signalR/jquery.signalR-2.4.0.min.js")"></script>
    <script src="@Url.Content("~/signalr/hubs")"></script>
    <script src="@Url.Content("~/Content/js/common/signalR/signalRContext.js")"></script>
    <script type="text/javascript">
        var vo = new Vue({
            el: '#comments',
            components: {
                'comment-item': {
                    props: ["comment"],
                    template: '#diary_comment_template'
                }
            },
            data: {
                comments: []
            }
        });

        var addComment = function (id,toUserName) {
            var content = $("#diary_comment").val();
            if (content == "" || content.length < 1) {
                alert("请输入评论!");
                $("#diary_comment").focus();
                return false;
            }

            $.post("/Personal/Diary/AddComment", { id: id, content: content }, function (result) {
                if (result.code == 100) {
                    vo.comments.push({
                        avatar: "/Content/img/avatar/a1.jpg",
                        nickname: "@ViewBag.TRUE_NAME",
                        sendtime: (new Date()).Format("yyyy-MM-dd hh:mm:ss"),
                        content: content
                    });
                    $("#diary_comment").val("");

                    //推送消息
                    sendMessage(toUserName, "comment", "@Model.SUBJECT 的评论", "/Personal/Diary/Details/@Model.DIA_ID#comment", content);

                    return false;
                }
                alert("评论失败！");
            });
        }

        var showReplyModal = function (commentid, replyto, nickname) {
            $("#comment_id").val(commentid);
            $("#reply_to").val(replyto);
            $("#reply_nickname").val(nickname);
        }

        var addCommentReply = function () {
            var content = $("#diary_comment_reply").val();
            if (content == "" || content.length < 1) {
                alert("请输入回复内容!");
                $("#diary_comment_reply").focus();
                return false;
            }

            var id = $("#comment_id").val();
            var reply_to = $("#reply_to").val();
            var nickname = $("#reply_nickname").val();
            $.post("/Personal/Diary/AddCommentReply", { id: id, reply_to: reply_to, content: content }, function (result) {
                if (result.code == 100) {
                    vo.comments.push({
                        avatar: "/Content/img/avatar/a1.jpg",
                        nickname: "@ViewBag.TRUE_NAME",
                        sendtime: (new Date()).Format("yyyy-MM-dd hh:mm:ss"),
                        content: "@@" + nickname + "<br/>" + content
                    });
                    $("#diary_comment_reply").val("");
                    $('#comment-reply-modal').modal('hide');

                    //推送消息
                    sendMessage(reply_to, "comment_reply", "@Model.SUBJECT 评论的回复", "/Personal/Diary/Details/@Model.DIA_ID#comment", content);

                    return false;
                }
                alert("评论失败！");
            });
        }
        var context = new SignalRContext();

    </script>
}